<template>
	<view class="page">
		<!-- 状态栏高度 -->
		<view class="top-status" style="background-color: #216BD2;" :style="{ height: heightAttribute.statusBarHeight + 'px' }"></view>
		<!-- 标题栏容器 -->
		<view class="top-bar" style="background-color: #216BD2;" :style="{
			height: heightAttribute.musicheadHeight + 'px',
			boxShadow: props.showBoxShadow ? '0px 8rpx 15rpx 0rpx rgba(0, 0, 0, 0.08)' : ''
		}">
			<!-- 返回 & 副标题 -->
			<view class="top-bar-left" :class="props.showLeft ? 'showLeft' : 'hideLeft'">
				<template v-if="props.leftText === 'return'">
					<!-- <image @tap="clickReturn" src="@/static/icon/return.png" style=""></image> -->
					<view class="">123</view>
				</template>
				<template v-else>
					<text>{{ props.leftText }}</text>
				</template>
			</view>
			<!-- 标题 -->
			<text class="top-bar-title" :class="props.showTitle ? 'showTitle' : 'hideTitle'">{{ props.titleText }}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from "vue";
	import { onReady } from '@dcloudio/uni-app'
	const props = defineProps<{
		// 左侧
		leftText : 'return' | 'return-home' | string | number;
		// 标题
		titleText : string | number;
		// 是否显示左侧
		showLeft : boolean;
		// 是否显示标题
		showTitle : boolean;
		// 是否显示阴影
		showBoxShadow : boolean;
	}>();
	const emit = defineEmits<{
		(e: 'remainingHeight', height: number): void;
		(e: 'currentHeight', height: number): void;
	}>();

	const heightAttribute = reactive({
		// 胶囊按钮信息
		menuButtonInfo: {
			width: 0,
			height: 0,
			top: 0
		},
		// 状态栏高度
		statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
		// 导航栏高度
		musicheadHeight: uni.getStorageSync('musicheadHeight') || 0,
	})

	onReady(() => {
		// #ifdef  MP-WEIXIN
		if(heightAttribute.statusBarHeight == 0 || heightAttribute.musicheadHeight == 0) {
			// 获取状态栏高度
			const { statusBarHeight, windowHeight, screenHeight } = uni.getSystemInfoSync()
			heightAttribute.statusBarHeight = statusBarHeight
			uni.setStorageSync('statusBarHeight', heightAttribute.statusBarHeight)
			
			// 获取胶囊按钮信息
			const { width, height, top } = uni.getMenuButtonBoundingClientRect()
			heightAttribute.menuButtonInfo = { width, height, top }
			
			// 胶囊按钮相对于离导航栏的上边距
			const topDistance = heightAttribute.menuButtonInfo.top - heightAttribute.statusBarHeight;
			
			// 计算导航栏高度
			heightAttribute.musicheadHeight = heightAttribute.menuButtonInfo.height + topDistance * 2;
			uni.setStorageSync('musicheadHeight', heightAttribute.musicheadHeight)
			
			// 传递导航栏高度
			emit('currentHeight', heightAttribute.menuButtonInfo.height + topDistance * 2)
			
			// 传递页面剩余高度
			emit('remainingHeight', heightAttribute.statusBarHeight + heightAttribute.musicheadHeight);
		}
		// #endif
	})
	
	// 点击返回
	const clickReturn = () => uni.navigateBack()
	
	// 点击房子
	const clickHome = () => uni.navigateBack({
		fail: () => {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}
	})
</script>

<style lang="scss" scoped>
	.showLeft {
		transform: translateX(0px);
		opacity: 1;
	}

	.hideLeft {
		transform: translateX(-80px);
		opacity: 0;
	}

	.showTitle {
		transform: translateX(0px);
		opacity: 1;
	}

	.hideTitle {
		transform: translateY(-60px);
		opacity: 0;
	}

	.page {
		position: sticky;
		top: 0;
		z-index: 3001;
	}

	.top-status {
		// transition: all 1s;
		will-change: height, transition;
		background-color: #FFF;
	}

	.top-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFF;
		// transition: all 0.6s;
		will-change: height, transition;

		.top-bar-left {
			// width: 50rpx;
			height: 50rpx;
			position: absolute;
			left: 24rpx;
			transition: all 1s;

			display: flex;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			text {
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFF;
			}
		}

		.top-bar-title {
			margin: 0 auto;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFF;
			transition: all 1s;
		}
	}
</style>